<template>
  <van-sticky>
    <header class="login-nav">
      <div class="login-nav-container">
        <!-- 左部分图标 -->
        <div class="login-nav-left">
          <van-icon @click="toHome" name="wap-home-o" size="0.64rem" />
        </div>
        <!-- 中间 -->
        <slot></slot>
        <!-- <div class="login-nav-center">网易严选</div> -->
        <!-- 右侧 -->
        <div class="login-nav-right">
          <van-icon @click="toSearch" name="search" size="0.64rem"></van-icon>
          <van-icon
            name="shopping-cart-o"
            size="0.64rem"
            style="margin-left: 20px"
            @click="toCart"
          ></van-icon>
        </div>
      </div>
    </header>
  </van-sticky>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
const router = useRouter();
//购物车
function toCart() {
  router.push("/shopcart");
}

const toHome = () => {
  router.push('/')
}

const toSearch = () => {
  router.push('/search')
}
</script>
<script lang="ts">
export default {
  name: "LoginHeader",
};
</script>
<style scoped lang="scss">
.login-nav {
  width: 100%;
  .login-nav-container {
    width: 351px;
    height: 44px;
    padding: 0 12px;
    background: #fafafa;
    line-height: 44px;
    position: relative;
    .login-nav-left {
      float: left;
    }
    .login-nav-right {
      float: right;
      padding-left: 20px;
      height: 44px;
      line-height: 44px;
    }
  }
}
</style>
